<template>
  <div class="breadcrumb">
    <el-row :gutter="20">
      <!-- 左侧 -->
      <el-col :span="12" class="breadcrumb-left">
        <div v-show="breadcrumb.length >= 2" class="goup">
          <a href="javascript:;" @click="handleGoup">返回上一级</a> |
        </div>
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="display: inline-block; line-height: 28px"
        >
          <el-breadcrumb-item v-for="v in breadcrumb" :key="v.pid">
            <a href="javascript:;" @click="handleBread(v)">{{ v.name }}</a>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="12" class="breadcrumb-right">
        <span class="el-icon-refresh select-btn" @click="handleRefresh">
          刷新
        </span>
        <span
          v-if="!netFileSelectFlag"
          class="select-btn"
          @click="handleSelectAll()"
        >
          {{ selectAll ? '取消全选' : '全选' }}
        </span>
        <span> 共{{ pageObj.count }}个 </span>
        <i
          :class="['show-type', display ? 'el-icon-menu' : 'el-icon-s-unfold']"
          @click="handleShow()"
        ></i>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      breadcrumb: [{ pid: 0, name: '全部文件' }],
      selectAll: false,
      display: true,
    }
  },
  props: ['listQuery', 'pageObj'],
  computed: mapGetters([
    'netPid',
    'netCheckedFile',
    'netFileList',
    'netFileSelectFlag',
  ]),
  watch: {
    netPid: {
      deep: true,
      handler(pid) {
        if (pid == 0) {
          this.breadcrumb = [{ pid: 0, name: '全部文件' }]
        }
      },
    },
    netCheckedFile() {
      this.selectAll = this.netFileList.length == this.netCheckedFile.length
    },
  },
  mounted() {
    this.$bus.$on('changeBread', (v) => {
      let { id, oldName } = v
      this.breadcrumb.push({ pid: id, name: oldName })
    })
  },
  beforeDestroy() {
    this.$bus.$off('changeBread')
  },
  methods: {
    //返回上一级
    handleGoup() {
      this.breadcrumb.pop()
      let pId = this.breadcrumb[this.breadcrumb.length - 1].pid
      this.$bus.$emit('refreshTbNetDiskList', { pId })
    },
    //面包屑点击
    handleBread(item) {
      if (this.breadcrumb.length == 1) return
      let idx = this.breadcrumb.indexOf(item)
      this.breadcrumb = this.breadcrumb.slice(0, idx + 1)
      let pId = item.pid
      this.$bus.$emit('refreshTbNetDiskList', { pId, oldName: '' })
    },
    //刷新
    handleRefresh() {
      this.$bus.$emit('refreshTbNetDiskList')
    },
    //全选
    handleSelectAll() {
      this.selectAll = !this.selectAll
      this.$bus.$emit('fileSelectAll', this.selectAll)
    },
    //展示形式
    handleShow() {
      this.display = !this.display
      this.$bus.$emit('fileDisplay', this.display)
    },
  },
}
</script>
<style scoped lang="scss">
.breadcrumb {
  color: #999;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}
.breadcrumb-left {
  .goup {
    float: left;
    line-height: 28px;
    margin-right: 5px;
    color: #ddd;
    a {
      color: #409eff;
    }
  }
}
.breadcrumb-right {
  text-align: right;
  display: inline-block;
  margin: 0px;
  .select-btn,
  .show-type {
    color: #666;
    cursor: pointer;
    padding: 0px 10px;
    &:hover {
      color: $mainColor;
    }
  }
  i {
    font-size: 16px;
  }
}
</style>